<template>
  <div>
    <!-- top -->
    <el-row id="top" :span="12"  type="flex" align="middle" >
      <el-col :span="4">
        <el-input @keyup.enter.native="searchOne()" v-model="search" placeholder="请输入用户名"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" icon="el-icon-search" @click="searchOne()" size="small">搜索</el-button>
      </el-col>
      <el-col :span="1">
        <el-button type="primary" icon="el-icon-plus" @click="inputOpen()" size="small">添加</el-button>
      </el-col>
    </el-row>
    <!-- 表格区域 -->
    <el-table :data="users" height="70vh" border style="width: 100%">
      <el-table-column prop="username" label="用户名" width="180" align="center">
      </el-table-column>
      <el-table-column prop="password" label="密码" width="180" align="center">
      </el-table-column>
      <el-table-column prop="auth" label="权限" width="180" align="center"> </el-table-column>
      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="changeUser(scope.$index, scope.row)">修改</el-button>
          <el-button type="primary" size="mini" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="用户信息" :visible.sync="userVisable" width="30%" :before-close="handleClose">
      <el-form :model="user" label-width="80px" class="Userform">
        <el-form-item label="用户名">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <div>
            <el-radio v-model="user.auth" label="管理员" border>管理员</el-radio>
            <el-radio v-model="user.auth" label="客户" border>客户</el-radio>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userVisable = false">取 消</el-button>
        <el-button type="primary" @click="changeUserend">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加用户 -->
    <el-dialog title="添加用户" :visible.sync="addVisable" width="30%" :before-close="handleClose">
      <el-form :model="user" label-width="80px" class="Userform" :rules="rules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <div>
            <el-radio v-model="user.auth" label="管理员" border>管理员</el-radio>
            <el-radio v-model="user.auth" label="客户" border>客户</el-radio>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisable = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style scoped>
#top {
  margin-bottom: 20px;
}

.Userform {
  width: 87%;
  margin: auto;
}
</style>
<script>
export default {
  data() {
    return {
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
      search: "",
      users: [
        {
          username: "",
          password: "",
          auth: "",
        },
      ],
      user: {
        oldusername: "",
        username: "",
        password: "",
        auth: "",
      },
      addVisable: false,
      userVisable: false,
    };
  },
  created: function () {
    //发请求获取所有数据
    this.$axios({
      url: "http://localhost:8085/selectAllUser",
      method: "get",
    })
      .then((response) => {
        this.users = response.data;
        this.change();
        console.log(this.users);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  mounted() {
    window.history.forward(1);
  },
  methods: {
    searchOne() {
      if (this.search == "") {
        this.$axios({
          url: "http://localhost:8085/selectAllUser",
          method: "get",
        })
          .then((response) => {
            this.users = response.data;
            this.change();
            console.log(this.users);
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$axios
          .get(
            "http://localhost:8085/selectUserbyUsername?username=" + this.search
          )
          .then((response) => {
            console.log(response.data);
            this.users = response.data;
          });
      }
    },
    inputOpen() {
      this.user = {};
      this.addVisable = true;
    },
    addUser() {
      this.change2();
      this.$axios
        .post("http://localhost:8085/addUser", this.user)
        .then((response) => {
          if (response) {
            this.change2();
            this.$axios({
              url: "http://localhost:8085/selectAllUser",
              method: "get",
            })
              .then((response) => {
                this.users = response.data;
                this.change();
                console.log(this.users);
              })
              .catch((err) => {
                console.log(err);
              });
            this.$message.success("添加成功");
          } else this.$message.error("添加失败");
        });
      this.addVisable = false;
    },
    change() {
      //转换权限映射值
      this.users.forEach((item) => {
        if (item.auth == "1") item.auth = "管理员";
        else if (item.auth == "0") item.auth = "客户";
        else if (item.auth == "管理员") item.auth = "1";
        else item.auth = "0";
      });
    },
    change2() {
      if (this.user.auth == "1") this.user.auth = "管理员";
      else if (this.user.auth == "0") this.user.auth = "客户";
      else if (this.user.auth == "管理员") this.user.auth = "1";
      else this.user.auth = "0";
    },
    changeUser(index, row) {
      this.user = row;
      console.log(this.user);
      this.user.oldusername = row.username;
      console.log(this.user);
      this.userVisable = true;
    },
    changeUserend() {
      this.change2();
      this.$axios
        .post("http://localhost:8085/updatebyUsername", this.user)
        .then((response) => {
          if (response.data) this.$message.success("修改成功");
          location.reload;
          this.change2();
        });
      this.userVisable = false;
    },
    deleteUser(index, row) {

      if (confirm("是否删除？")) {
        this.$axios
          .get("http://localhost:8085/deletebyUsername?username=" + row.username)
          .then((response) => {
            if (response.data) this.$message.success("删除成功");
            this.$axios({
              url: "http://localhost:8085/selectAllUser",
              method: "get",
            })
              .then((response) => {
                this.users = response.data;
                this.change();
                console.log(this.users);
              })
              .catch((err) => {
                console.log(err);
              });
          });
      }
    },
    //借出详情方法接口
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
  },
};
</script>